<template>
  <div>
    <el-card class="box-card" v-loading="loading">
      <!-- 卡片顶部的添加品牌按钮 -->
      <el-button type="primary" size="default" icon="Plus" @click="addTrademark">
        添加品牌
      </el-button>
      <!-- 表格组件：用于展示已有品牌数据 -->
      <el-table style="margin: 10px 0" border :data="trademarkArr">
        <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
        <!-- table-column: 默认展示数据使用 div -->
        <!-- <el-table-column label="品牌名称" prop="tmName"></el-table-column> -->
        <el-table-column label="品牌名称">
          <template #default="{ row }">
            <div>{{ row.tmName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="品牌Logo">
          <template #default="{ row }">
            <img :src="row.logoUrl" alt="图片加载失败" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="品牌操作">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              icon="Edit"
              @click="updateTrademark(row)"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              icon="Delete"
              @click="deleteTrademark(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器组件
      pagination
        v-model:current-page - 设置分页器当前代码
        v-model:page-size - 设置分页器每页显示条数
        page-sizes - 设置下拉菜单数据
        background - 设置分页器背景色
        layout - 设置分页器 6 个子组件布局调整
      -->
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="[3, 5, 7, 9]"
        :background="true"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total"
        :pager-count="9"
        @change="getHasTradmark"
      />
    </el-card>

    <!-- 用于添加或修改品牌的弹窗 -->
    <TrademarkDialog ref="TrademarkDialogRef" />
  </div>
</template>

<script lang="ts" setup>
// import 语句
import { ref, reactive, onMounted } from 'vue'
import { reqHsaTrademark } from '@/api/product/trademark/index'
import type { Records, TradeMark, TradeMarkResponse } from '@/api/product/trademark/types'
import TrademarkDialog from './component/TrademarkDialog.vue'

const loading = ref<boolean>(false)
const pageNo = ref<number>(1)
const limit = ref<number>(3)
const total = ref<number>(0)
const trademarkArr = ref<Records>([])
const TrademarkDialogRef = ref<InstanceType<typeof TrademarkDialog>>()

const initFormData = () => {
  return {
    tmName: '',
    logoUrl: '',
  } as TradeMark
}
const states = reactive({
  visible: false,
  action: '',
  title: `品牌`,
  form: initFormData(),
})

// 获取已有品牌的接口封装为一个函数: 在任何情况下想获取数据，调用此函数即可

const getHasTradmark = async () => {
  try {
    loading.value = true
    const result: TradeMarkResponse = await reqHsaTrademark(pageNo.value, limit.value)
    total.value = result.total
    trademarkArr.value = result.records
  } finally {
    loading.value = false
  }
}

onMounted(async () => {
  // 获取品牌列表数据
  await getHasTradmark()
})

const addTrademark = () => {
  TrademarkDialogRef.value?.openDialog('新增')
  states.visible = true
}

const updateTrademark = (row: TradeMark) => {
  TrademarkDialogRef.value?.openDialog('修改', row)
}

const deleteTrademark = (id: string) => {
  console.log('删除品牌', id)
}
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  display: block;
  width: 178px;
  height: 178px;
}
</style>

<style>
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
